/**
 * @Author: jipeng.Li
 * @Date: 2021-02-24 08:22:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-02-27 09:58:21
 * @Description: 交易记录模态框
 */

import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View, Animated } from 'react-native';
import {
  fontColorBlack,
  fontColorCoffee,
  mainBgColorWhite,
  px2dp,
  splitLineColorLightGray
} from '@/styles';

const TransactionsRecordModal = (props) => {
  const {
    optionIndex,
    modalClick,
    optionClick,
    optionSource,
    activationFlag,
  } = props;

  return (
    <TouchableOpacity
      onPress={() => modalClick && modalClick()}
      activeOpacity={0.9}
      style={styles.container}
    >
      {
        optionSource && (
          optionSource.map(option => {
            return (
              <TouchableOpacity
                key={`optionSource${option.id}`}
                onPress={() => optionClick && optionClick(option)}
                activeOpacity={0.98}
                style={styles.itemContainer}
              >
                <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                  {
                    (option.activateIcon || option.icon) && (
                      <Image
                        style={[styles.itemImage, { marginRight: px2dp(25) }]}
                        source={option.id === optionIndex ? option.activateIcon : option.icon}
                      />
                    )
                  }
                  <Text
                    style={{
                      fontSize: px2dp(32),
                      color: option.id === optionIndex ? fontColorCoffee : fontColorBlack
                    }}
                  >
                    {option.text}
                  </Text>
                </View>
                {(option.id === optionIndex && activationFlag) && (
                  <Image
                    style={styles.itemImage}
                    source={activationFlag}
                  />
                )}
              </TouchableOpacity>
            );
          })
        )
      }
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    height: '100%',
    width: '100%',
    position: 'absolute',
    zIndex: 10,
    top: 50,
  },
  itemContainer: {
    backgroundColor: mainBgColorWhite,
    padding: px2dp(25),
    borderBottomColor: splitLineColorLightGray,
    borderBottomWidth: px2dp(1),
    flexDirection: 'row'
  },
  itemImage: {
    width: px2dp(32),
    height: px2dp(32),
  },
  itemText: {
    fontSize: px2dp(32),
  }
});

export default TransactionsRecordModal;
